import React, { useEffect, useState } from 'react';
import '../../styles/Allocate/AllocateManage.scss'
import { Input, notification, Button, DatePicker, Space, Table, Select, Upload } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { Allocate_list, delete_list, Sousuo_list } from "../../utils/api/index";
import { useNavigate } from 'react-router-dom';
const { RangePicker } = DatePicker;

interface Props {

}
interface DataType {
    key: React.Key;
    tracking: number;
    people: string;
    diaochu: string;
    diaoru: string;
    shenqing: string;
    shenhetime: string;
    outbound: string;
    ruku: string;
    shenhe: string;
    transfer: string;
}
function AllocateManage(props: Props) {
    const [data, setData] = useState('')
    const columns: ColumnsType<DataType> = [
        {
            title: '调拨单号',
            dataIndex: 'tracking',

        },
        {
            title: '操作人员',
            dataIndex: 'people',

        },
        {
            title: '调出仓库',
            dataIndex: 'diaochu',
        },
        {
            title: '调入仓库',
            dataIndex: 'diaoru',
        },
        {
            title: '申请时间',
            dataIndex: 'shenqing',
        },
        {
            title: '审核时间',
            dataIndex: 'shenhetime',
        },
        {
            title: '出库时间',
            dataIndex: 'outbound',
        },
        {
            title: '入库时间',
            dataIndex: 'ruku',
        },
        {
            title: '审核状态',
            dataIndex: 'shenhe',
        },
        {
            title: '调拨状态',
            dataIndex: 'transfer',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    {/* 跳到编辑页面 */}
                    <a onClick={() => {
                        edit(record);
                    }}>编辑</a>
                    <a onClick={() => {
                        details(record);
                    }}>详情</a>
                    <a onClick={() => {
                        del(record);
                    }}>删除</a>
                </Space>
            ),
        },
    ];
    var navigator = useNavigate()
    //编辑
    var edit = function (cs: any) {
        navigator('/index/home/Edit', { state: cs })
    }
    //详情
    var details = function (cs: any) {
        navigator('/index/home/Details', { state: cs })
    }
    var Sousuo = function () {
        console.log(data);
        Sousuo_list({ people: data }).then((res => {
            console.log(res.data);
            setallocateManage(res.data)
        }))
    }
    var changedata = (a: any) => {
        console.log(a);
        setData(a.target.value)
    }
    //删除
    var del = function (cs: any) {
        delete_list(cs.id).then((res) => {
            console.log(res.data);
            if (res.request.status == 200) {
                Allocate_list().then((res) => {
                    console.log(res.data);
                    setallocateManage(res.data)
                })
                notification.success({ message: "删除成功" });
            }
        });
    };
    var [allocateManage, setallocateManage] = useState([]);
    //库存管理列表渲染
    useEffect(() => {
        Allocate_list().then((res) => {
            console.log(res.data);
            setallocateManage(res.data)
        })
    }, [])
    var navigate = useNavigate()
    //跳路由的方法
    var Create = function () {
        navigate('/index/home/Create');
    }

    return (
        <div className='AllocateManage'>
            <div className='top'>  仓储管理 / 库存调拨管理</div>
            <div className='input'>
                {/* 输入框 */}
                <Input defaultValue={data} onChange={changedata} placeholder="请输入单号" />
                <Input placeholder="请选择仓库" />
                <Input placeholder="请选择盘点人员" />
                {/* 日期选项 */}
                <Space direction="vertical" size={12} >
                    <RangePicker />
                </Space>
                <Select
                    // defaultValue="lucy"
                    style={{ width: 120 }}
                    placeholder="请选择状态"
                    options={[
                        {
                            value: '进行中',
                            label: '进行中',
                        },
                        {
                            value: '已结束',
                            label: '已结束',
                        },

                    ]}
                />
                {/* <Input placeholder="请选择状态" /> */}
                <Button type="primary" onClick={Sousuo}>搜索</Button>
                <Button type="primary" onClick={() => Create()} >创建</Button>
                <Upload {...props}>
                    <Button className='daochu'>导出</Button>
                </Upload>
            </div>
            <div className='center'>
                <Table columns={columns} dataSource={allocateManage} className="table" />
            </div>
        </div>


    );
}

export default AllocateManage;